<template>
    <div>
        <div class="logo_content">
            <img :src="$store.getters.base_url+userInfo.logo" alt="" class="logo">
            <div class="upload_box">
                <Upload title="用户头像" @getImg="getImg" width="90px" height="120px"></Upload>
            </div>
        </div>
        <mt-field label="店铺名称" placeholder="请输入店铺名称" v-model="userInfo.shop_name"></mt-field>
        <mt-field label="公告" placeholder="请输入店铺公告" v-model="userInfo.describe"></mt-field>
        <!-- <template v-for="(item,index) of time_interval">
            <mt-field :label="'开始营业时间('+ (1+index) +')'" placeholder="请输入开始营业时间" type="time" v-model="item[0]"></mt-field>
            <mt-field :label="'结束营业时间('+ (1+index) +')'" placeholder="请输入结束营业时间" type="time" v-model="item[1]"></mt-field>
        </template> -->
        <section class="login_message register-title">
            营业时间
        </section>
        <time-set :time='time_interval'></time-set>
        <section class="login_message register-title">
            配送时间
        </section>
        <time-set :time='send_range'></time-set>
        <section class="login_message">
            <mt-button class="btn" @click="edit">修改</mt-button>
        </section>
    </div>
</template>
<script>
import Upload from "../components/upload";
import timeSet from '../components/timeSet'
import {Toast} from 'mint-ui'
import {editBasic} from '../api'
export default {
    data() {
        return {
            userInfo:{},
            time_interval:[],
            send_range:[]
        }
    },
    created(){
        this.getUserInfo();
    },
    methods:{
        getUserInfo(){
            console.log(this.$store.getters.userInfo);
            let time_interval = this.$store.getters.userInfo.time_interval.split(',');
            let arr = [];
            for(let i of time_interval){
                arr.push(i.split('-'));
            }
            this.time_interval = arr;
            let send_range = this.$store.getters.userInfo.send_range.split(',');
            arr = [];
            for(let i of send_range){
                arr.push(i.split('-'));
            }
            this.send_range = arr;
            this.userInfo = this.$store.getters.userInfo
        },
        getImg(data){
            console.log(data);
            this.userInfo.logo = data[0];
        },
        checkTime(time){
            return new Promise((resolve, reject)=>{
                let arr = [];
                for(let i in time){
                    if(time[i].length < 2){ 
                        reject("请规范填写时间段");
                    };
                    if(time[i][0] >= time[i][1]){
                        reject("开始时间不能小于结束时间");
                    }
                    let item = time[i].join('-');
                    arr.push(item);
                    if(i>0){
                        if(time[i][1] < time[i - 1][0] || time[i - 1][1] < time[i][0]) {
                        } else {
                            reject("时间段重叠");
                        }
                    }
                }
                resolve(arr);
            })  
        },
        edit(){
            this.checkTime(this.time_interval).then(res=>{
                let time_interval = res.toString();
                this.checkTime(this.send_range).then(res=>{
                    let data = {
                        token:this.$store.getters.token,
                        shop_name:this.userInfo.shop_name,
                        logo:this.userInfo.logo,
                        describe:this.userInfo.describe,
                        time_interval,
                        send_range:res.toString()
                    }
                    if(!data.shop_name){
                        Toast("请输入商户名称")
                        return;
                    }else if(!data.logo){
                        Toast("请选择上传图片")
                        return;
                    }else if(!data.describe){
                        Toast("请输入店铺公告")
                        return
                    }
                    editBasic(data).then(res=>{
                        console.log(res);
                        Toast(res.msg)
                    })
                }).catch(err=>{
                    Toast(err);
                })
            }).catch(err=>{
                Toast(err);
            })
        }
    },
    components: { Upload,timeSet },
}
</script>
<style scoped>
    .logo_content{
        width: 6rem;
        height: 6rem;
        margin: 2rem auto;
    }
    .logo{
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    .mint-cell{
        border-bottom: 1px solid #ccc;
    }
    .upload_box{
        position: absolute;
        top: 3rem;
        opacity: 0;
    }
    .btn{
        background: #F0463C;
        color: #fff;
    }
    .register-title{
        margin: auto;
        text-align: left;
        background: #f2f2f2;
        line-height: 3rem;
        font-weight: bolder;
        padding-left: 5%;
        width: 95%;
    }
</style>